<template lang="pug">
Dialog(
  v-model="dialogVisible"
  title="检验详情"
  height="full"
  size="middle"
)
  .detail 
    .detail__info
      mt-form(
        :model="detailInfo"
        :items="formItems"
        disabled
        :columns="2"
      )
    .detail__json-viewer
      el-scrollbar
        JsonViewer(
          :expand-depth="5" 
          boxed 
          sort 
          :value="jsonData"
        )
</template>

<script setup lang="ts">
import type { LisDataEntity } from "@scmt/api-lis-lis-data";
import { Dialog, type FormProps, Input } from "@scmt/common-components";
import { useApi } from "@scmt/core-api";
import { useUtils } from "@scmt/lib-utils";
import { JsonViewer } from "vue3-json-viewer";

const $api = useApi();
const $utils = useUtils();

const model = defineModel<null | LisDataEntity>({
  default: null,
});

const detailInfo = computed(() =>
  $api.lis.lisData.$$createEntity(model.value || {})
);

const jsonData = computed(() => JSON.parse(detailInfo.value.data || "{}"));

const formItems: FormProps["items"] = [
  {
    label: "标本条码",
    prop: "code",
    disabled: true,
  },
  {
    label: "设备类型",
    prop: "equipmentType",
    placeholder: " ",
  },
  {
    label: "设备型号",
    prop: "equipmentManufacturerModel",
  },
  {
    label: "患者姓名",
    prop: "personName",
  },
  {
    label: "检查项目",
    prop: "item",
  },
  {
    label: "监测时间",
    prop: "createTime",
  },
  {
    label: "数据",
    prop: "_data",
    render: () => "",
  },
];

const dialogVisible = computed({
  get() {
    return Boolean(model.value);
  },
  set(val: Boolean) {
    !val && (model.value = null);
  },
});
</script>

<style>
@import "./jsonView.css";
</style>

<style lang="less" scoped>
.detail {
  height: 100%;
  display: flex;
  flex-direction: column;

  &__info {
    flex-shrink: 0;

    :deep(.el-descriptions) {
      &__content {
        overflow: hidden;
      }
    }

    :deep(.el-descriptions__label) {
      font-weight: 700;

      &::after {
        content: "：";
      }
    }
  }

  &__json-viewer {
    flex: 1;
    overflow: hidden;
    border: var(--el-border);

    :deep(.jv-container) {
      border: none !important;
      box-shadow: none !important;
    }
  }
}
</style>
